<template>
  <div class="flexrow">
    <div>
      <el-select
        v-model="first_val"
        filterable
        placeholder="请选择"
        @change="handleChange(1)"
      >
        <el-option
          v-for="item in first_opt"
          :key="item[0]"
          :label="item[1]"
          :value="item[0]"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-select
        v-model="second_val"
        filterable
        placeholder="请选择"
        @change="handleChange(2)"
      >
        <el-option
          v-for="(item, index) in second_opt"
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { getParameter_major, getParameter_industry } from "@/utils/twostage";
export default {
  name: "WkstageSelect",

  components: {},
  props: {
    editVal: {//控制回显
      type: String,
    },
    formType: {//判断数据类型 目前是行业跟专业
      type: String,
    },
    valHan: { //数据处理连接符 不设置默认以|分割数据
      type: String,
      default: "|",
    },
  },
  data() {
    return {
      first_opt: [],//一级菜单
      first_val: "",//一级菜单选中值
      second_opt: [],//二级菜单
      second_val: "",//二级菜单选中值
      firstArr: [],//一级菜单源数据
      secondArr: [],//二级菜单源数据
      editShow: false,//控制回显时的编辑联动效果清理
    };
  },

  mounted() {},
  watch: {
    first_val(nVal, oVal) {//一级菜单改变联动展示二级对应值
      if (nVal == oVal) return;
      if (!this.editShow) this.second_val = "";
      this.second_opt = this.secondArr[nVal];
      if (this.editShow) {
        let second = "";
        let val =this.handleData(this.editVal.split("|"));
        for (let i = 0; i < this.second_opt.length; i++) {
          const i_obj = this.second_opt[i];
          if (i_obj == val[1]) second = i_obj;
        }
        this.second_val = second;
        this.editShow = false;
      }
    },
  },
  created() {
    //获取数据渲染
    let obj = {
      major_select: getParameter_major(),
      industry_select: getParameter_industry(),
    }[this.formType];
    this.first_opt = obj.first;
    this.firstArr = obj.first;
    this.secondArr = obj.second;
    if (this.editVal) {//回显处理
      this.editShow = true;
      let val =this.handleData(this.editVal.split("|"));
      let first = "";
      for (let i = 0; i < this.first_opt.length; i++) {//筛选对应值
        const i_obj = this.first_opt[i];
        if (i_obj[1] == val[0]) first = i_obj[0];
      }
      this.first_val = first;
    }
  },
  methods: {
    //回调处理
    handleChange() {
      let first = "";
      for (let i = 0; i < this.first_opt.length; i++) {
        const i_obj = this.first_opt[i];
        if (i_obj[0] == this.first_val) first = i_obj[1];
      }
      this.$emit("stage", first + this.valHan + this.second_val);
    },
    //处理数据结果，多个|分割数据时，处理成两个
    handleData(val) {
      if (val.length > 2) {
        const len = val.length;
        const v = val[len - 1];
        var _arr = val;
        _arr.length = len - 1;
        let n_arr = [];
        n_arr.push(_arr.join("|"));
        n_arr.push(v);
        val = n_arr;
      }
      return val;
    },
  },
};
</script>
<style lang="scss" scoped>
.flexrow {
  display: flex;
  flex-direction: row;
}
</style>
